<template>
  <div class="container">
    <div class="container__div--left">
      <div class="block">
        <el-avatar :size="50" :src="circleUrl" class="head"></el-avatar>
      </div>

      <div class="title">
        <span class="left"></span>
        <h1>个人信息</h1>
        <span class="right"></span>
      </div>

      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formData"
        disabled
      >
        <el-form-item label="用户名：">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="职位：">
          <el-input v-model="formData.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色：">
          <el-input v-model="formData.nickname"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="formData.phone"></el-input>
        </el-form-item>
        <el-form-item label="所在市：">
          <el-input v-model="formData.city"></el-input>
        </el-form-item>
      </el-form>

      <div class="btn">
        <el-button type="danger">修改信息</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 60%;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 20px;
  align-items: center;
  margin: 50px auto 0;
}

.block {
  text-align: center;
}

.head {
  width: 100px !important;
  height: 100px !important;
}

.title {
  text-align: center;
  margin: 30px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title > h1 {
  padding: 0 30px;
  color: #333;
}

.left,
.right {
  height: 1px;
  width: 40%;
  background-color: #ccc;
}

.btn {
  margin-top: 50px;
  text-align: center;
}
</style>

<script>
export default {
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      formData: {},
      labelPosition: "right",
    };
  },
  mounted() {
    let msg = JSON.parse(localStorage.getItem("userInfo")).userInfo;
    this.formData = msg;

    console.log(this.formData);
  },
};
</script>
